<template>
  <div class="complaint-page">
    <!-- 保持与之前页面一致的头部导航 -->
    <div class="header-nav">
      <div class="header-left">
        <img src="./logo.png" alt="中国铁路12306" class="logo">
        <div class="search-box">
          <input type="text" placeholder="车票、餐饮、常旅客、相关规章" class="search-input">
          <button type="button" class="search-button">
            <i class="el-icon-search search-icon"></i>
          </button>
        </div>
      </div>
      <div class="header-right">
        <span class="nav-item">无障碍</span>
        <span class="divider">|</span>
        <span class="nav-item">敬老版</span>
        <span class="divider">|</span>
        <span class="nav-item">English</span>
        <span class="divider">|</span>
        <span class="nav-item">我的12306</span>
        <span class="divider">|</span>
        <router-link to="/login" class="nav-item">登录注册</router-link>
      </div>
    </div>

    <!-- 主导航栏 -->
    <div class="sub-nav">
      <div class="sub-nav-wrapper">
        <router-link to="/" class="sub-nav-item">首页</router-link>
        <router-link to="/tickets" class="sub-nav-item">车票</router-link>
        <router-link to="/group" class="sub-nav-item">团购服务</router-link>
        <router-link to="/membership" class="sub-nav-item">会员服务</router-link>
        <router-link to="/station" class="sub-nav-item">站车服务</router-link>
        <router-link to="/business" class="sub-nav-item">商旅服务</router-link>
        <router-link to="/guide" class="sub-nav-item">出行指南</router-link>
        <router-link to="/query" class="sub-nav-item">信息查询</router-link>
      </div>
    </div>

    <!-- 页面主体内容 -->
    <div class="main-content">
      <!-- 投诉流程步骤指示器 -->
      <div class="complaint-steps">
        <div class="step-item" :class="{ active: currentStep === 1 }">
          <span class="step-number">1</span>
          <span class="step-text">阅读服务说明</span>
        </div>
        <div class="step-line" :class="{ active: currentStep > 1 }"></div>
        <div class="step-item" :class="{ active: currentStep === 2 }">
          <span class="step-number">2</span>
          <span class="step-text">填写投诉信息</span>
        </div>
      </div>

      <!-- 步骤1：投诉服务说明 -->
      <div v-if="currentStep === 1" class="complaint-instructions">
        <div class="instructions-box">
          <h2 class="instructions-title">投诉服务说明</h2>
          <div class="instructions-content">
            <p>1．中国铁路客户服务中心网站（www.12306.cn）注册用户可通过本网站提交投诉事项，非注册用户可先行注册或通过12306铁路客服电话投诉。</p>
            <p>2．受理站车服务质量及网络购票问题投诉，可根据投诉事项分类填写。</p>
            <p>3．网络购票用户可投诉自乘车日起30天以内（含）的事项，乘车及订单信息自动提取；网络购票用户投诉30天以上事项及非网络购票用户投诉时，可拨打12306铁路客服电话进行人工投诉。</p>
            <p>4．投诉须有明确的被投诉对象、具体的投诉事实和理由。</p>
            <p>5．提交投诉时可同时上传1—5个总容量不大于10M的视频、音频或照片附件材料。具体格式为：</p>
            <p class="indent">(1)视频 AVI、WMV、MOV、MP4。</p>
            <p class="indent">(2)音频 MP3、WMA、M4A、WAV。</p>
            <p class="indent">(3)图片 JPG、JPEG、PNG。</p>
            <p>6．下列投诉不予受理：</p>
            <p class="indent">(1)无具体的投诉事实；</p>
            <p class="indent">(2)法院、仲裁机构正在进行审理、仲裁，或者判决、仲裁已经发生法律效力的，其他有关行政机关正在处理的；</p>
            <p class="indent">(3)纠纷双方曾达成协议并已履行，无新的投诉事由的；</p>
            <p class="indent">(4)不符合国家法律、法规、规章有关规定的。</p>
            <p>7．对符合受理条件的投诉，铁路客服人员将于2个工作日内电话联系客户核实处理。</p>
            <p>8．如撤销已提交投诉事项，请拨打12306铁路客服电话取消服务。</p>
          </div>
        </div>

        <!-- 同意/不同意按钮 -->
        <div class="instructions-actions">
          <button class="disagree-btn" @click="cancelComplaint">不同意</button>
          <button class="agree-btn" @click="goToForm">我已阅读并同意</button>
        </div>
      </div>

      <!-- 步骤2：投诉表单 -->
      <div v-if="currentStep === 2" class="complaint-form">
        <div class="form-container">
          <div class="complaint-type">
            <label>投诉类型</label>
            <div class="type-options">
              <label><input type="radio" name="complaintType" value="service" checked> 服务质量投诉</label>
              <label><input type="radio" name="complaintType" value="ticket"> 网络购票投诉</label>
            </div>
          </div>

          <div class="form-section">
            <h3 class="section-title">旅客信息</h3>
            <div class="form-row">
              <div class="form-field required">
                <label>乘车人</label>
                <select>
                  <option value="">请选择乘车人</option>
                  <!-- 乘车人选项 -->
                </select>
              </div>
              <div class="form-field required">
                <label>乘车信息</label>
                <select>
                  <option value="">请选择乘车信息</option>
                  <!-- 乘车信息选项 -->
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>性别</label>
                <div class="gender-options">
                  <label><input type="radio" name="gender" value="male"> 男</label>
                  <label><input type="radio" name="gender" value="female"> 女</label>
                </div>
              </div>
              <div class="form-field required">
                <label>联系电话</label>
                <div class="phone-input">
                  <span>+86</span>
                  <input type="tel" placeholder="请输入手机号码">
                </div>
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>购票证件类型</label>
                <select>
                  <option value="idCard">居民身份证</option>
                  <option value="passport">护照</option>
                  <option value="other">其他</option>
                </select>
              </div>
              <div class="form-field">
                <label>证件号码</label>
                <input type="text" placeholder="请输入证件号码">
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>乘车日期</label>
                <input type="date">
              </div>
              <div class="form-field">
                <label>车次</label>
                <input type="text" placeholder="请输入车次">
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>乘车站</label>
                <input type="text" placeholder="请输入乘车站">
              </div>
              <div class="form-field">
                <label>到站</label>
                <input type="text" placeholder="请输入到站">
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>车厢号</label>
                <input type="text" placeholder="请输入车厢号">
              </div>
              <div class="form-field">
                <label>席位号</label>
                <input type="text" placeholder="请输入席位号">
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>订单号</label>
                <input type="text" placeholder="请输入订单号">
              </div>
            </div>
          </div>

          <div class="form-section">
            <h3 class="section-title">投诉信息</h3>
            <div class="form-row">
              <div class="form-field required">
                <label>车站/列车</label>
                <div class="radio-options">
                  <label><input type="radio" name="locationType" value="station"> 车站</label>
                  <label><input type="radio" name="locationType" value="train" checked> 列车</label>
                </div>
                <button class="add-location-btn">添加投诉地点</button>
              </div>
            </div>
            <div class="form-row">
              <div class="form-field required">
                <label>投诉对象、事情经过及诉求</label>
                <textarea placeholder="请详细描述投诉对象、事情经过及诉求" rows="5" maxlength="200"></textarea>
                <div class="char-count">0/200</div>
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>附件</label>
                <div class="file-upload">
                  <input type="file" id="fileUpload" multiple accept="image/*,audio/*,video/*">
                  <label for="fileUpload" class="upload-label">未选择文件</label>
                  <button class="add-file-btn">添加更多附件</button>
                </div>
                <div class="file-tips">支持图片、音频、视频格式，最大不能超过10M</div>
              </div>
            </div>
          </div>

          <div class="form-tips">
            <h3 class="tips-title">温馨提示</h3>
            <p>1．请您根据投诉事项，选择“服务质量投诉”和“网络购票投诉”。</p>
            <p>2．网络购票用户可投诉自乘车日起30天以内的事项，乘车及订单信息自动提取；网络购票用户投诉30天以上（不含）事项及非网络购票用户投诉时，可通过拨打12306铁路客服电话进行人工投诉。</p>
            <p>3．为给您提供更好服务，请详细填写投诉对象、事件经过及相关诉求。</p>
          </div>

          <div class="form-actions">
            <button class="back-btn" @click="backToInstructions">返回</button>
            <button class="submit-btn" @click="submitComplaint">提交投诉</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 控制当前步骤
const currentStep = ref(1);

// 返回上一步
const backToInstructions = () => {
  currentStep.value = 1;
};

// 前往表单页
const goToForm = () => {
  currentStep.value = 2;
};

// 取消投诉
const cancelComplaint = () => {
  // 返回首页或上一页
  window.history.back();
};

// 提交投诉
const submitComplaint = () => {
  // 这里处理提交逻辑
  alert('投诉已提交，铁路客服人员将于2个工作日内电话联系您核实处理。');
  // 提交后可以跳转到投诉成功页面
  // router.push('/complaint-success');
};
</script>

<style scoped>
.complaint-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  margin-right: 20px;
  object-fit: contain;
}

.search-box {
  position: relative;
  width: 300px;
}

.search-input {
  width: 100%;
  height: 36px;
  padding: 0 40px 0 15px;
  border: 1px solid #ddd;
  border-radius: 18px;
}

.search-button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-icon {
  font-size: 16px;
  color: #666;
}

.search-button:hover .search-icon {
  color: #007bff;
}

.header-right {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.nav-item {
  margin: 0 10px;
  cursor: pointer;
}

.divider {
  color: #ddd;
}

.sub-nav {
  background-color: #003366;
  color: white;
  height: 56px;
}

.sub-nav-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-around;
}

.sub-nav-item {
  color: white;
  text-decoration: none;
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  transition: background-color 0.3s;
  font-size: 16px;
  letter-spacing: 1px;
}

.sub-nav-item:hover,
.sub-nav-item.active {
  background-color: #005599;
  font-weight: 500;
}

.main-content {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

.complaint-steps {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.step-text {
  font-size: 14px;
  color: #666;
}

.step-line {
  flex: 1;
  height: 2px;
  background-color: #e0e0e0;
  margin: 0 10px;
}

.step-item.active .step-number {
  background-color: #e84118;
  color: white;
}

.step-item.active .step-text {
  color: #333;
}

.step-line.active {
  background-color: #e84118;
}

.complaint-instructions {
  max-width: 800px;
  margin: 0 auto;
}

.instructions-box {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.instructions-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #003366;
}

.instructions-content {
  line-height: 1.8;
  font-size: 14px;
}

.indent {
  text-indent: 2em;
}

.instructions-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.disagree-btn,
.agree-btn {
  padding: 10px 30px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.disagree-btn {
  background-color: white;
  border: 1px solid #ddd;
  color: #333;
}

.agree-btn {
  background-color: #e84118;
  border: none;
  color: white;
}

.complaint-form {
  max-width: 800px;
  margin: 0 auto;
}

.form-container {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
}

.complaint-type {
  margin-bottom: 20px;
}

.complaint-type label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
}

.type-options {
  display: flex;
  gap: 20px;
}

.type-options label {
  display: flex;
  align-items: center;
}

.type-options input {
  margin-right: 5px;
}

.form-section {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #003366;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.form-field {
  flex: 1;
}

.form-field label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.required label::before {
  content: '*';
  color: red;
  margin-right: 5px;
}

.gender-options {
  display: flex;
  gap: 15px;
}

.gender-options label {
  display: flex;
  align-items: center;
}

.gender-options input {
  margin-right: 5px;
}

.phone-input {
  display: flex;
}

.phone-input span {
  background-color: #f0f0f0;
  padding: 8px;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.phone-input input {
  border-radius: 0 4px 4px 0;
}

.radio-options {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.radio-options label {
  display: flex;
  align-items: center;
}

.radio-options input {
  margin-right: 5px;
}

.add-location-btn {
  background-color: #003366;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.file-upload {
  position: relative;
  margin-bottom: 10px;
}

.file-upload input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.upload-label {
  display: inline-block;
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
  width: 200px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-file-btn {
  background-color: #003366;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
  font-size: 14px;
}

.file-tips {
  font-size: 12px;
  color: #666;
}

.char-count {
  text-align: right;
  font-size: 12px;
  color: #666;
}

.form-tips {
  background-color: #f9f9f9;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
}

.tips-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}

.form-tips p {
  margin-bottom: 5px;
  font-size: 14px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.back-btn,
.submit-btn {
  padding: 10px 30px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.back-btn {
  background-color: white;
  border: 1px solid #ddd;
  color: #333;
}

.submit-btn {
  background-color: #e84118;
  border: none;
  color: white;
}
</style>